<template>
  <div id=''>
    <div id="RegisterBox">
      <div><span>账 号</span><input type="text" placeholder="请输入账号" v-model="user"></div>
      <div><span>密 码</span><input type="password" placeholder="请输入密码" v-model="pwd"></div>
      <div><span>确认密码：</span><input type="password" placeholder="请确认密码" v-model="againpwd"></div>
      <button @click="Register">注册账号</button>
    </div>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'registerView',
}
</script>

<script lang='ts' setup>
import router from '@/router';
import { ref } from 'vue';
//账号密码变量
const user = ref('')
const pwd = ref('')
const againpwd = ref('')

//注册功能
const Register = () => {
  if (user.value == '' || pwd.value == '' || againpwd.value == '') {
    alert('账号或密码不能为空！')
  } else if (pwd.value != againpwd.value) {
    alert('两次密码不一致！')
  } else if (user.value == pwd.value) {
    alert('账号密码不能相同！')
  } else {
    setStorage();
    alert('注册成功！')
    router.push('/login')
  }
}

//封装本地存储
function setStorage() {
  const arr = [];
  //储存输入框元素内容的对象
  const obj = {
    user: user.value,
    pwd: pwd.value
  }
  //不能直接存入对象进去，需要转化
  const objstr = JSON.stringify(obj);
  //暂定的存储
  arr.push(objstr);
  //把数组转化成字符串
  const arrstr = arr.join('&');
  //存入本地
  localStorage.setItem('token', arrstr)
};


</script>

<style lang='scss' scoped>
#RegisterBox {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30rem;
  height: auto;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);

  div {
    width: 100%;
    height: 4rem;
    margin-top: 5px;

    span {
      color: #7b7b7b;
      display: inline-block;
      text-align: center;
      line-height: 4rem;
      width: 10rem;
    }

    input {
      color: #7b7b7b;
      border: none;
      outline: none;
      height: 3rem;
      padding-left: 2rem;
      border-radius: 99999999px;
      width: calc(100% - 13rem);
      background-color: #f1f2f3;
    }
  }

  button {
    margin: 2rem 2rem;
  }
}
</style>
